<template>
    <div class="monitor" style="width: 100%;height:100%;">
        <div style="padding-top: 10px;padding-left: 10%;font-size: 14px">{{this.title}}</div>
        <ul class="maxMinBox">
            <li v-for="item in maxMinList" :key="item.label">
                <p>{{item.label}}</p>
                <p>{{item.value}}</p>
            </li>
        </ul>
        <div :id="id" style="width: 100%;height:100%;"></div>
    </div>
</template>

<script>
export default {
    name: 'monitorEchart',
    props: {
        id: {
            type: Number | String,
            default: ''
        },
        monitorData: {
            type: Array,
            default: []
        },
        title: '',
        monitorTimeType: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            option: {},
            flowData: [],
            maxMinList: [
                {
                    label: '最大值',
                    value: ''
                },
                {
                    label: '最小值',
                    value: ''
                }
            ],
            specialLength: 0,
            statusMap: {
                'COMMIT': 1,
                'End': 4,
                'Process': 1,
                'Reject': 2,
                'Recall': 3
            },
            colorMap: {
                fontUsual: '#909399',
                normal: '#ebebeb',
                success: '#5ec0f5',
                error: '#f56c6c'
            },
            label: {
                echartTitle: '审批流程',
                status: {
                    0: '未审批',
                    1: '已审批',
                    2: '驳回',
                    3: '撤回',
                    4: '审批通过'
                },
                end: '结束',
                reject: '驳回',
                recall: '撤回',
                submit: '提交',
                approved: '已审批',
                approval: '审批通过',
                applicant: '申请人',
                flowState: '流程状态',

            },
            dateList: [],
            valueList: [],
            loginValue: { //增加登录学生 管理员 教师信息
                manage: [],
                teacher: [],
                student: []
            },
            loginExtraSeries: [],
            loginExtraLegend: [],
            timeFormat: ''
        }
    },
    created() {
    },
    mounted() {
        this.EC = echarts.init(document.getElementById(`${this.id}`));
    },
    watch: {
        monitorData(data) {
            this.timeFormat = this.monitorTimeType === 1
                ? 'HH:mm:ss'
                : 'YYYY/MM/DD HH:mm:ss'
            this.handleData(data);
            this.init()
        }
    },
    methods: {
        init() {
            let that = this;
            this.option = {
                title: {
                    // text: this.title,
                    // left: '10%'
                },
                grid: {
                    top: '10%'
                },
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    splitLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    boundaryGap: false,
                    // type: 'category',
                    name: '时间',
                    axisLabel: {
                        // rotate: 90,
                        // interval: 2
                    },
                    data: this.dateList
                },
                yAxis: {
                    name: '个',
                    type: 'value',
                },
                series: [
                    {
                        name: this.id == 'login' && '总人数' || '',
                        type: 'line',
                        // symbol: 'circle',
                        // symbolSize: 10,
                        itemStyle: {    //线条折点得颜色
                            color: '#73645A',
                        },
                        lineStyle: {
                            color: '#73645A'  
                        },
                        tooltip: {
                        },
                        data: this.valueList
                    },
                    ...this.loginExtraSeries
                ],
                ...this.loginExtraLegend
            }
            this.EC.setOption(this.option);
        },
        extractData(data) {
            let that = this
            this.dateList = data.map(item => {
                return moment(item.time).format(this.timeFormat)
            })
            this.valueList = data.map(item => item.value)
            this.maxMinList[0].value = this.valueList.length 
                ? Math.max.apply(null, this.valueList)
                : 0
            this.maxMinList[1].value = this.valueList.length
                ? Math.min.apply(null, this.valueList)
                : 0
        },
        handleData(data) {
            if (this.id == 'login' && data && !Array.isArray(data)) {
                data = data || {};
                this.loginValue = {
                    manage: (data.manage || []).map(item => item.value),
                    teacher: (data.teacher || []).map(item => item.value),
                    student: (data.student || []).map(item => item.value)
                };
                this.loginExtraSeries = [
                    {
                        name: '管理员',
                        type: 'line',
                        lineStyle: {
                            color: '#50BED7'  
                        },
                        itemStyle: {    //线条折点得颜色
                            color: '#50BED7',
                        },
                        data: this.loginValue.manage,
                    },
                    {
                        name: '教师',
                        type: 'line',
                        lineStyle: {
                            color: '#EF0137'  
                        },
                        itemStyle: {    //线条折点得颜色
                            color: '#EF0137',
                        },
                        data: this.loginValue.teacher
                    },
                    {
                        name: '学生',
                        type: 'line',
                        lineStyle: {
                            color: '#EB780A'  
                        },
                        itemStyle: {    //线条折点得颜色
                            color: '#EB780A',
                        },
                        data: this.loginValue.student
                    }
                ]
                this.loginExtraLegend = {
                    legend: {
                        data: ['总人数', '管理员', '教师', '学生']
                    }        
                };
                this.extractData(data.total || []);
            }else {
                data = data || [];
                this.loginExtraSeries = [];
                this.loginExtraLegend = {};
                this.extractData(data);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.monitor {
    position: relative;
    width: 100%;
    height: 100%;
}
.maxMinBox {
    position: absolute;
    top: 0;
    right: 20px;
    margin: 0;
    & li {
        list-style: none;
        float: left;
        margin-right: 10px;
        & p {
            margin: 0;
            font-size: 12px;
            text-align: right;
            &:first-child {
                color: #999;
            }
        }
    }
    &::after {
        content: '';
        clear: both;
    }
}
</style>